{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% form_theme form _self %}
{% block number_widget -%}
    {# type="number" doesn't work with floats #}
    {%- set type = type|default('text') %}
    <div class="col-sm-2">
        <input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
    </div>
{%- endblock number_widget %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
            {{ form_start(form, {'attr':{'id':'validation-form'}}) }}
            {{ form_row(form.trunk_num) }}
            {#{{ form_row(form.white_sound) }}#}
            {{ form_row(form.phone_num) }}
            {{ create(path('icsoc_namelist_white_index')) }}
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@autosize_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        $('#white_info_form_phone_num').autosize({append: "\n"});
        $('#validation-form').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            errorPlacement: function(error, element){
                error.appendTo(element.parent());
                $(element.parent().parent()).attr('class','form-group has-error');
            },
            showErrors: function(errorMap, errorList) {
                this.defaultShowErrors();
                for (var i=0; i<errorList.length;i++) {
                    $(errorList[i].element).removeClass('help-block');
                    $(errorList[i].element).parent().parent().attr('class', 'form-group has-error');
                }
            },
            success: function(lable) {
                $(lable.parent().parent()).attr('class', 'form-group');
//                var id = $(lable).attr("for");
//                if (id == 'white_info_form_phone_num') {
//                    $(lable.parent().parent()).attr('class', 'form-group');
//                } else {
//                    $(lable.parent()).attr('class', 'form-group');
//                }
            },
            rules: {
                'white_info_form[phone_num]': {
                    required: true,
                    isPhone:true
                },
                'white_info_form[white_sound]':{required:false}
            },
            messages: {
                'white_info_form[phone_num]': {required:"{{ 'White list number not empty'|trans  }}",isPhone:"{{ 'Phone can only be for the digital'|trans }}"},
                'white_info_form[white_sound]': {required:"{{ 'Please select the voice'|trans }}"}
            }
        });
        jQuery.validator.addMethod("isPhone", function(value, element) {
            var words = value.split('\n');
            var flag = true;
            var reg = /^\d+$/;
            for (var i = 0; i<words.length; i++) {
                if (!reg.test($.trim(words[i]))) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }, "");
    </script>
{% endblock %}